<style lang="less">
.component-count {
    overflow: hidden;
    width: 120px;
    .ivu-input-number-handler-wrap {
        display: none !important;
    }
    .ivu-input-number {
        border: 0 !important;
    }
}
</style>


<template>
<p class="component-count" bd-gray4 text-center>
    <span pd2 bdr-gray4 :style="{cursor:value<=min?'not-allowed':'pointer'}" :gray4="value <= min" @click="handleMinus">-</span>
    <InputNumber v-model=value size="small" :min=min :max=max w4 @on-change=handleChange />
    <span pd2 bdl-gray4 :style="{cursor:value >= max?'not-allowed':'pointer'}" :gray4="value >= max" @click="handleAdd">+</span>
</p>
</template>

<script lang="ts">
import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
import AbpBase from '../../lib/abpbase'

@Component
export default class Count extends AbpBase{
    @Prop() value:number;
    @Prop({type:Number, default:0}) min:number;
    @Prop({type:Number, default:Number.MAX_SAFE_INTEGER}) max:number;
    @Prop({type:Number, default:1}) step:number;
    @Prop({type:Boolean, default:false}) disabled:Boolean;
    handleChange() {
        this.$emit('input', this.value);
    }
    handleAdd() {
        if(this.value >= this.max) return;
        this.value += this.step;
        this.$emit('input', this.value);
    }
    handleMinus() {
        if(this.value <= this.min) return;
        this.value -= this.step;
        this.$emit('input', this.value);
    }
}
</script>

<style>

</style>
